<template>
  <div>
    <Modal
      :value="modalState"
      :title="title"
      :loading="loading"
      :ok-text="btnTitle"
      @on-ok="handleSubmit"
      @on-cancel="cancel"
      width="40%">
      <Form
        ref="businessModal"
        :model="row"
        :rules="ruleInline"
        style="width: 100%"
        :label-width="100">
        <Row>
          <Col span='10'>
            <FormItem prop="tel" label="账号：">
              <Input type="text" v-model="row.tel" placeholder="请输入账号" :disabled="row.tid ? true : false" />
            </FormItem>
          </Col>
          <Col span='10'>
            <FormItem prop="password" label="密码：">
              <Input type="text" v-model="row.password" placeholder="请输入密码" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span='10'>
            <FormItem prop="uname" label="商户姓名：">
              <Input :disabled="row.tid ? true : false" type="text" v-model="row.uname" placeholder="请输入商户姓名" />
            </FormItem>
          </Col>
          <Col span='10'>
            <FormItem prop="appid" label="微信appid：">
              <Input type="text" v-model="row.appid" placeholder="请输入微信appid" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span='10'>
            <FormItem prop="tel" label="商户电话：">
              <Input :disabled="row.tid ? true : false" type="text" v-model="row.tel" placeholder="请输入商户电话" />
            </FormItem>
          </Col>
          <Col span='10'>
            <FormItem prop="secret" label="微信secret：">
              <Input type="text" v-model="row.secret" placeholder="请输入微信secret" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span='10'>
            <FormItem prop="agentid" label="省级代理：">
              <Select v-model="row.agentid" placeholder="请选择省级代理" :disabled="row.tid ? true : false">
                <Option v-for="item in agentList" :value="item.id.toString()" :key="item.id">
                  {{ item.uname }}
                </Option>
              </Select>
            </FormItem>
          </Col>
          <Col span='10'>
            <FormItem prop="auth" label="微信认证：">
              <RadioGroup v-model="row.auth">
                <Radio label="1">是</Radio>
                <Radio label="0">否</Radio>
              </RadioGroup>
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span='10'>
            <FormItem prop="company" label="企业名称：">
              <Input type="text" v-model="row.company" placeholder="请输入企业名称" />
            </FormItem>
          </Col>
          <Col span='10'>
            <FormItem prop="gid" label="微信gid：">
              <Input type="text" v-model="row.gid" placeholder="请输入微信gid" />
            </FormItem>
          </Col>
        </Row>
        <Row>
          <Col span='10'>
            <FormItem prop="trade" label="行业：">
              <Input :disabled="row.tid ? true : false" type="text" v-model="row.trade" placeholder="请输入行业" />
            </FormItem>
          </Col>
          <Col span='10'>
            <FormItem prop="tag" label="短信标签：">
              <Input type="text" v-model="row.tag" placeholder="请输入短信标签" />
            </FormItem>
          </Col>
        </Row>
      </Form>
    </Modal>
  </div>
</template>
<script>
import {
  mapActions,
  mapState
} from 'vuex'
export default {
  name: 'BusinessModal',
  data () {
    return {
      title: '',
      loading: true,
      btnTitle: '',
      ruleInline: {
        tel: [
          {
            required: true,
            message: '此为必填项，不能为空',
            trigger: 'blur'
          }
        ],
        uname: [
          {
            required: true,
            message: '商户姓名不能为空',
            trigger: 'blur'
          }
        ],
        appid: [
          {
            required: true,
            message: '微信appid不能为空',
            trigger: 'blur'
          }
        ],
        secret: [
          {
            required: true,
            message: '微信secret不能为空',
            trigger: 'blur'
          }
        ],
        agentid: [
          {
            required: true,
            message: '请选择省级代理',
            trigger: 'change'
          }
        ],
        auth: [
          {
            required: true,
            message: '请选择微信认证',
            trigger: 'change'
          }
        ],
        company: [
          {
            required: true,
            message: '企业名称不能为空',
            trigger: 'blur'
          }
        ],
        tag: [
          {
            required: true,
            message: '短信标签不能为空',
            trigger: 'blur'
          }
        ],
        gid: [
          {
            required: true,
            message: '微信gid不能为空',
            trigger: 'blur'
          }
        ]
      }
    }
  },
  updated () {
    if (this.row.tid && this.row.tid !== '') {
      this.title = '编辑商户'
      this.btnTitle = '保存'
    } else {
      this.title = '创建商户'
      this.btnTitle = '创建'
    }
  },
  computed: {
    ...mapState({
      row: state => state.business.row,
      agentList: state => state.business.agentList,
      modalState: state => state.modal.modalState
    })
  },
  methods: {
    ...mapActions(['updateModalState']),
    changeLoading () {
      this.loading = false
      this.$nextTick(() => {
        this.loading = true
      })
    },
    handleSubmit () {
      this.$refs.businessModal.validate((valid) => {
        if (!valid) {
          return this.changeLoading()
        }
        this.$emit('business-valid', {
          tid: this.row.tid,
          tel: this.row.tel,
          password: this.row.password,
          uname: this.row.uname,
          appid: this.row.appid,
          secret: this.row.secret,
          auth: this.row.auth,
          company: this.row.company,
          gid: this.row.gid,
          trade: this.row.trade,
          tag: this.row.tag,
          agentid: this.row.agentid
        })
      })
    },
    cancel () {
      this.updateModalState(false)
      this.$refs['businessModal'].resetFields()
    }
  }
}
</script>
